<!-- 企业编辑弹窗 -->
<template>
  <ele-modal
    form
    :width="560"
    :model-value="modelValue"
    title="处罚"
    @update:modelValue="updateModelValue"
    resizable="vertical"
  >
    <div class="tools">
      <el-select
        v-model="form.id"
        class="mr"
        placeholder="选择处罚事项"
        style="width: 200px"
      >
        <el-option
          v-for="item in punishItemList"
          :key="item.id"
          :label="item.title"
          :value="item.id"
        />
        <el-option :value="0" label="其他">其他</el-option>
      </el-select>

      <el-input
        v-if="form.id === 0"
        v-model="form.reason"
        style="width: 150px"
        placeholder="处罚原因"
        class="mr"
      />
      <el-input
        v-if="form.id === 0"
        v-model.number="form.amount"
        style="width: 100px"
        placeholder="金额"
        class="mr"
      />

      <el-button type="warning" class="mr" :loading="loading" @click="save()">
        提交
      </el-button>
    </div>

    <ele-pro-table
      ref="tableRef"
      :columns="columns"
      :datasource="datasource"
      :show-overflow-tooltip="true"
      highlight-current-row
      border
      stripe
      :pagination="false"
      v-model:selections="selections"
      row-click-checked
      row-key="id"
      :toolbar="false"
    >
      <template #status="{ row }">
        <el-tag :type="statusType(row.status)">
          {{ statusText(row.status) }}
        </el-tag>
      </template>
    </ele-pro-table>
  </ele-modal>
</template>

<script setup>
  import { ref, watch } from 'vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import { pageApplyRecord, punishStudent, getPunishItem } from '@/api/company';

  const emit = defineEmits(['done', 'update:modelValue']);

  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    /** 修改回显的数据 */
    job: Object
  });

  /** 表格选中数据 */
  const selections = ref([]);

  /** 处罚事项列表 */
  const punishItemList = ref([]);

  /** 提交状态 */
  const loading = ref(false);

  /** 表格实例 */
  const tableRef = ref(null);

  /** 表单数据 */
  const form = ref({
    id: void 0, // 处罚事项的id
    title: '',
    reason: '',
    amount: '',
    job_id: 0,
    site_id: 0,
    code: ''
  });

  /** 表格列配置 */
  const columns = ref([
    {
      type: 'selection',
      columnKey: 'selection',
      width: 50,
      align: 'center',
      fixed: 'left'
    },
    {
      label: '报名状态',
      width: 90,
      slot: 'status',
      align: 'center'
    },
    {
      prop: 'realname',
      label: '名字',
      width: 120
    },
    {
      prop: 'tel',
      label: '电话'
    }
  ]);

  const statusText = (value) => {
    const cs = {
      1: '正常',
      0: '退定'
    };
    return cs[value];
  };
  const statusType = (state) => {
    const stateMap = {
      1: 'success',
      0: 'info'
    };
    return stateMap[state];
  };

  /** 表格数据源 */
  const datasource = ({ page, where, orders }) => {
    return pageApplyRecord({
      ...where,
      ...orders,
      page,
      limit: 99999999,
      id: props.job.id
    });
  };

  /** 保存编辑 */
  const save = () => {
    console.log(selections.value.length);
    if (selections.value.length === 0) {
      EleMessage.warning('请选择处罚事项和处罚人!');
    } else {
      if (
        form.value.id === 0 &&
        form.value.reason === '' &&
        form.value.amount === ''
      ) {
        EleMessage.warning('请填写处罚原因和金额!');
      } else {
        // console.log(form.id)
        var requestData = Object.assign({}, form.value);
        requestData.list = JSON.stringify(selections.value);

        punishStudent(requestData)
          .then((msg) => {
            EleMessage.success(msg);
            updateModelValue(false);
            emit('done');
          })
          .catch((e) => {
            loading.value = false;
            EleMessage.error(e.message);
          });
      }
    }
  };
  /** 处罚实现列表 */
  getPunishItem({})
    .then((res) => {
      punishItemList.value = res.list;
    })
    .catch((e) => {
      EleMessage.error(e.message);
    });

  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };

  watch(
    () => props.modelValue,
    (modelValue) => {
      if (modelValue) {
        form.value.id = void 0;
        form.value.amount = '';
        form.value.reason = '';
        form.value.title = '';
        form.value.job_id = props.job.id;
        form.value.site_id = props.job.site_id;
        form.value.code = props.job.code;

        selections.value = [];

        // credit.value = props.data.work_date_time > 0;
      }
    }
  );
</script>

<style scoped>
  .tools {
    display: flex;
    margin-bottom: 10px;
    .input {
      margin-right: 8px;
    }
  }
  .foot {
    margin-top: 10px;
    span {
      margin-left: 14px;
      font-size: 12px;
    }
  }
  .mr {
    margin-right: 8px;
  }
</style>
